import { useState, useEffect } from 'react';
import './content.less';
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from '@ant-design/icons';
import { Button, Menu } from 'antd';
import ContentRight from './right.jsx'
import { useLocation, useNavigate } from 'react-router-dom';
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = [
    getItem('应用管理', 'app', <MailOutlined />, [
        getItem('我的应用', 'allApp'),
        getItem('我管理的应用', 'manageApp'),
        getItem('我参与的应用', 'joinApp'),
    ]),
    getItem('用户管理', 'user', <DesktopOutlined />)
];

function Content(props) {
    const navigate  = useNavigate();
    const [collapsed, setCollapsed] = useState(false);
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };
    const [curMenu, setCurMenu] = useState('allApp');
    const [selectedKeys, setSelectedKeys] = useState([]);
    const onClickMenu = ({ item, key, keyPath, domEvent }) => {
        if (key !== 'manageApp') {
            navigate('/')
        }
        setSelectedKeys([key])
        setCurMenu(key)
    }
    const location = useLocation();
    const getReload = () => {
        let reloadPath = {
            path: location.pathname,
            menu: curMenu
        }
        localStorage.setItem('reloadPath', JSON.stringify(reloadPath))
    }
    window.addEventListener('beforeunload', getReload)
    useEffect(() => {
        try {
            const reloadPath = JSON.parse(localStorage.getItem('reloadPath'))
            setSelectedKeys([reloadPath.menu])
            setCurMenu(reloadPath.menu)
        } catch {
            setSelectedKeys(['allApp'])
            setCurMenu('allApp')
        }
    }, [])
    return (
        <div className="app-content">
            <div className="left">
                <Button
                    type="primary"
                    onClick={toggleCollapsed}>{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                </Button>
                <div className="menu-container">
                    <Menu
                        defaultSelectedKeys={['allApp']}
                        defaultOpenKeys={['app']}
                        selectedKeys={selectedKeys}
                        mode="inline"
                        theme="dark"
                        inlineCollapsed={collapsed}
                        onClick={onClickMenu}
                        items={items}/>
                </div>
            </div>
            <ContentRight curMenu={curMenu}></ContentRight>
        </div>
    )
}
export default Content;